<div class="widget modal" id="simpledialog">
	<header><h2>Thông báo hệ thống</h2></header>
	<section>
		<p>
			Bạn thực sự muốn xóa?
		</p>

		<!-- yes/no buttons -->
		<p>
			<button class="button button-blue close">Đồng ý</button>
			<button class="button button-gray close">Hủy</button>
		</p>
	</section>
</div>
<div class="container_8 clearfix">                
	<!-- Main Section -->
	<section class="main-section grid_8">
	<!-- Tables Section -->
	<div class="main-content">
		<header>
			<h2>Thiết lập topmenu</h2>
		</header>
		<section class="with-table">
			<table id="TablePaginate" class="datatable tablesort selectable paginate full">
				<thead>
					<tr>
						<th style="width: 50px;">ID</th>
						<th style="width: 170px;">Tên danh mục</th>
						<th style="width: 80px;">Vị trí</th>
						<th style="width: 80px">Lựa chọn</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<th>ID</th>
						<th>Tên danh mục</th>
						<th>Vị trí</th>
						<th>Lựa chọn</th>
					</tr>
				</tfoot>
				<tbody>
			<?php
				foreach ($this->arrTopMenu as $menu)
				{
			?>
					<tr>
						<td><?php echo $menu['id']?></td>
						<td style="font-weight: bold;"><?php echo $this->modelNC->getName($menu['categoryID'])?></td>
						<td>
							<select ajaxify="<?php echo $this->url->action("changepos")?>" class="<?php echo $menu['id']?>" id="<?php echo $menu['position']?>">
								<option value="0">0</option>
								<?php echo $this->option;?>
							</select>
						</td>
						<td>
							<a onclick="confirmDelete(this);" class="modalInput" rel="#simpledialog" accesskey="<?php echo $menu['id']?>" ajaxify="<?php echo $this->url->action("delete")?>">Xóa</a>
						</td>
					</tr>
					<?php }?>
				</tbody>
			</table>
			<div id='pager' class='pager'>
				<li><a href='#' alt='Previous' class='prevPage button-blue'>Trước</a></li>
				<span class='listPages'></span>
				<li><a href='#' alt='Next' class='nextPage button-blue'>Kế tiếp</a></li>
				<span class="button-blue" style='float:right; height: 20px; padding: 0 5px 0 5px;'>Đang xem <span class='currentPage'></span> của <span class='totalPages'></span></span>
			</div>
		</section>
		
		<header>
			<h2>Danh sách danh mục</h2>
		</header>
		<section class="with-table">
			<table id="TablePaginate" class="datatable tablesort selectable paginate full">
				<thead>
					<tr>
						<th style="width: 50px;">ID</th>
						<th style="width: 170px;">Tên danh mục</th>
						<th style="width: 80px">Lựa chọn</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<th>ID</th>
						<th>Tên danh mục</th>
						<th>Lựa chọn</th>
					</tr>
				</tfoot>
				<tbody>
			<?php
				foreach ($this->arrNC as $nc)
				{
			?>
					<tr>
						<td><?php echo $nc['id']?></td>
						<?php if ($nc['parentID'] == 0){?>
							<td style="font-weight: bold;"><?php echo $nc['name']?></td>
						<?php }else{ ?>
							<td><?php echo '......'.$nc['name']?></td>
						<?php }?>
						<td>
							<a onclick="addThis(this);" accesskey="<?php echo $nc['id']?>" class="<?php echo $this->url->action("create")?>">Đưa lên Menu</a>
						</td>
					</tr>
					<?php }?>
				</tbody>
			</table>
			<div id='pager' class='pager'>
				<li><a href='#' alt='Previous' class='prevPage button-blue'>Trước</a></li>
				<span class='listPages'></span>
				<li><a href='#' alt='Next' class='nextPage button-blue'>Kế tiếp</a></li>
				<span class="button-blue" style='float:right; height: 20px; padding: 0 5px 0 5px;'>Đang xem <span class='currentPage'></span> của <span class='totalPages'></span></span>
			</div>
		</section>
	</div>
	<!-- End Tables Section -->
	</section>
	<!-- Main Section End -->
</div>
<script type="text/javascript">
$(document).ready(function(){
    /**
     * Modal Dialog Boxes Setup
     */
	$(".modalInput").overlay({

        // some mask tweaks suitable for modal dialogs
        mask: {
            color: '#000',
            loadSpeed: 200,
            opacity: 0.5
        },

        closeOnClick: false
    });

    //Table pagging - sort
	$('#TablePaginate').paginateTable({ rowsPerPage: 15 });
	$('#TablePaginate').tablesort();

	$('select').each(function(index)
	{
		$(this).children().each(function(index){
		if ($(this).val() == $(this).parent().attr('id'))	
			$(this).attr('selected', 'selected');
		})
	});

	$("select").change(function(){
		data = {
    			id: $(this).attr("class"),
    			pos: $(this).val(),
    			old: $(this).attr("id")
            };
    		$.ajax({
	    		url: $(this).attr("ajaxify"),
        		data: data,
        		type: "POST",
        		dataType: "json",
        		success: function(response){
    				if(!response.success)
    				{
						Boxy.alert(response.message);
	    			}
            	}
        	});
	});
});
function confirmDelete(obj) {
    /* Simple Modal Box */
    var buttons1 = $("#simpledialog button").click(function(e) {
	
        // get user input
        var yes = buttons1.index(this) === 0;

        if (yes) {
            $.post($(obj).attr("ajaxify"),{id: $(obj).attr("accessKey")}, function(response){
		   		if(response.success)
		   		{
		   			window.location.href = "<?php echo $this->url->action("topmenu")?>";
			   	}
           }, "json");
        }
    });
}
function addThis(obj) {
		data = {
			categoryID: obj.accessKey
        };
		$.ajax({
    		url: obj.className,
    		data: data,
    		type: "POST",
    		dataType: "json",
    		success: function(response){
				if(response.success)
				{
    				alert("Danh mục đã được đưa lên menu");
    				window.location.href = "<?php echo $this->url->action("topmenu")?>";
				}
				else
					alert(response.message);								
        	}
    	});
}

</script>